<template>
  <div class="page-container">
    <div class="page-header">
      <h2>学习进度分析</h2>
    </div>

    <!-- 总体进度概览 -->
    <div class="progress-overview">
      <div class="overview-card">
        <div class="overview-header">
          <h3>总体完成进度</h3>
          <span class="progress-percentage">{{ overallProgress.completed }}%</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: overallProgress.completed + '%' }"></div>
        </div>
        <div class="progress-stats">
          <div class="stat-item">
            <span class="stat-label">已完成任务</span>
            <span class="stat-value">{{ overallProgress.completedTasks }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">总任务数</span>
            <span class="stat-value">{{ overallProgress.totalTasks }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 各科目进度 -->
    <div class="subjects-progress">
      <h3 class="section-title">各科目进度</h3>
      <div class="subjects-grid">
        <div v-for="subject in subjects" :key="subject.type" class="subject-card">
          <div class="subject-header">
            <span class="subject-icon">{{ subject.icon }}</span>
            <span class="subject-name">{{ subject.name }}</span>
          </div>
          <div class="subject-progress">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: subject.progress + '%', background: subject.color }"></div>
            </div>
            <span class="progress-text">{{ subject.progress }}%</span>
          </div>
          <div class="subject-details">
            <div class="detail-item">
              <span>完成：{{ subject.completed }}/{{ subject.total }}</span>
              <span>平均分：{{ subject.averageScore }}</span>
            </div>
            <p class="subject-comment">{{ subject.comment }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近进度趋势 -->
    <div class="progress-trend">
      <h3 class="section-title">进度趋势</h3>
      <div class="trend-cards">
        <div v-for="trend in recentTrends" :key="trend.week" class="trend-card">
          <div class="trend-header">
            <span class="trend-period">{{ trend.week }}</span>
            <span :class="['trend-indicator', trend.change >= 0 ? 'up' : 'down']">
              {{ trend.change >= 0 ? '↑' : '↓' }} {{ Math.abs(trend.change) }}%
            </span>
          </div>
          <div class="trend-progress">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: trend.progress + '%' }"></div>
            </div>
            <span class="progress-text">{{ trend.progress }}%</span>
          </div>
          <p class="trend-summary">{{ trend.summary }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressAnalysis',
  data() {
    return {
      overallProgress: {
        completed: 75,
        completedTasks: 45,
        totalTasks: 60
      },
      subjects: [
        {
          type: 'vocabulary',
          name: '词汇学习',
          icon: '📚',
          progress: 85,
          completed: 17,
          total: 20,
          averageScore: 92,
          color: '#409eff',
          comment: '词汇量稳步提升，发音准确度高'
        },
        {
          type: 'reading',
          name: '阅读理解',
          icon: '📖',
          progress: 70,
          completed: 7,
          total: 10,
          averageScore: 88,
          color: '#67c23a',
          comment: '理解能力良好，需加强细节把握'
        },
        {
          type: 'listening',
          name: '听力训练',
          icon: '🎧',
          progress: 65,
          completed: 13,
          total: 20,
          averageScore: 85,
          color: '#e6a23c',
          comment: '听力理解进步明显，语音识别需加强'
        },
        {
          type: 'speaking',
          name: '口语练习',
          icon: '🗣️',
          progress: 60,
          completed: 6,
          total: 10,
          averageScore: 83,
          color: '#f56c6c',
          comment: '口语表达流畅度提升，需多加练习'
        }
      ],
      recentTrends: [
        {
          week: '本周',
          progress: 75,
          change: 5,
          summary: '完成任务数增加，学习效率提升'
        },
        {
          week: '上周',
          progress: 70,
          change: -2,
          summary: '任务完成度略有下降，需加强时间管理'
        },
        {
          week: '前两周',
          progress: 72,
          change: 8,
          summary: '学习积极性高，进步明显'
        }
      ]
    }
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.progress-overview {
  margin: 20px 0;
}

.overview-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dcdfe6;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.overview-header h3 {
  margin: 0;
  font-size: 18px;
  color: #303133;
}

.progress-percentage {
  font-size: 24px;
  color: #409eff;
  font-weight: 500;
}

.progress-bar {
  height: 8px;
  background: #f0f2f5;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.progress-fill {
  height: 100%;
  background: #409eff;
  transition: width 0.3s ease;
}

.progress-stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.stat-value {
  display: block;
  font-size: 20px;
  color: #303133;
  font-weight: 500;
  margin-top: 4px;
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
}

.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.subject-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dcdfe6;
}

.subject-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.subject-icon {
  font-size: 24px;
}

.subject-name {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.subject-progress {
  margin-bottom: 16px;
}

.progress-text {
  font-size: 14px;
  color: #606266;
  margin-top: 8px;
  display: block;
}

.subject-details {
  margin-top: 12px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.subject-comment {
  font-size: 14px;
  color: #909399;
  margin: 0;
  line-height: 1.4;
}

.trend-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.trend-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #dcdfe6;
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.trend-period {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.trend-indicator {
  font-size: 14px;
}

.trend-indicator.up {
  color: #67c23a;
}

.trend-indicator.down {
  color: #f56c6c;
}

.trend-summary {
  margin: 12px 0 0 0;
  font-size: 14px;
  color: #606266;
}

@media (max-width: 768px) {
  .subjects-grid,
  .trend-cards {
    grid-template-columns: 1fr;
  }
}
</style>
